<template>
  <div class="view-logs">
    <TableTools :tableTools="tableTools" @on-search="handleClickSearch"></TableTools>
    <Table :columns="columns" :data="data"></Table>
    <Modal v-model="modalVisible" title="错误堆栈信息">
      <p>出错了</p>
      <div slot="footer">
        <Button type="primary" @click="handleClickClose">关闭</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import TableTools from 'components/TableTools'
export default {
  name: 'logs',
  data () {
    return {
      columns: [
        {
          type: 'index',
          width: 50
        },
        {
          title: '错误分类',
          key: 'type'
        },
        {
          title: '发生时间',
          key: 'time'
        },
        {
          title: '错误信息',
          key: 'message'
        },
        {
          title: '查看堆栈信息',
          width: 160,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                on: {
                  click: () => {
                    const { row } = params
                    this.viewErrorStask(row)
                  }
                }
              }, '查看')
            ])
          }
        }
      ],
      data: [
        {
          id: '123',
          message: 'error',
          time: '2017-08-09',
          type: '前端'
        }
      ],
      tableTools: {
        search: true
      },
      modalVisible: false
    }
  },
  methods: {
    handleClickSearch (keyword) {
      console.log(keyword)
    },
    viewErrorStask (record) {
      this.modalVisible = true
    },
    handleClickClose () {
      this.modalVisible = false
    }
  },
  components: {
    TableTools
  }
}
</script>
